<template>
  <div class="container">
    <Child :str="'我是子组件'" @test="test"></Child>

    <span class="color-hong fs18">全局样式测试（全局变量、mixin、include）</span>
    <span>阿里图标测试</span>
    <span class="iconfont icon-24px"></span>
    <span>element-ui测试</span>
    <i class="el-icon-edit"></i>
    <el-button @click="get">请求get接口</el-button>
    <el-button @click="post">请求post接口</el-button>
    <el-button @click="list">请求数据列表</el-button>
    <span>AOS测试</span>
    <span data-aos="fade-up" style="width: 100px; height: 100px; background-color: red"></span>
    <span>数据测试</span>
    <span>queryId: {{ queryId }}</span>
    <span>name: {{ name }}</span>
    <span>store.getters.userInfo.name: {{ $store.getters.userInfo.name }}</span>
    <el-button @click="goIndex">回到首页</el-button>
    <el-input v-model="from.name" style="width: 240px" placeholder="Please name" />
    <el-button @click="setUserInfo(from.name)">设置用户数据</el-button>
    <el-button @click="conStoreData">输出store中的数据</el-button>
  </div>
</template>

<script>
import AOS from "aos";

import Child from "@/components/Child/index.vue";

import { getAPI, postAPI, listAPI } from "@/service/api/common";

export default {
  components: { Child },
  data() {
    return {
      queryId: this.$route.query.id,
      name: "张三",
      from: {
        name: ""
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      AOS.init();
    });
  },
  methods: {
    /**
     * @description 回到首页
     */
    goIndex() {
      this.$router.push({
        path: "/"
        // name: "Index",
      });
    },
    /**
     * @description 设置用户数据
     */
    setUserInfo(name) {
      this.name = name;
    },
    /**
     * @description 测试方法
     */
    test(child) {
      console.log("测试方法", child);
    },

    /**
     * @description 请求接口
     */
    get() {
      getAPI({ id: this.queryId })
        .then(res => {
          console.log(res);
        })
        .catch(e => {
          console.log(e);
        })
        .finally(() => { });
    },
    post() {
      postAPI({ id: this.queryId })
        .then(res => {
          console.log(res);
        })
        .catch(e => {
          console.log(e);
        })
        .finally(() => { });
    },
    list() {
      listAPI({})
        .then(res => {
          console.log(res);
        })
        .catch(e => {
          console.log(e);
        })
        .finally(() => { });
    },
    /**
     * @description 输出store中的数据
     */
    conStoreData() {
      console.log("测试store方法");
      this.$store.dispatch("Test");
      console.log("测试store数据", this.$store.getters.test);
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.color-hong {
  color: $color-hong;
}

.fs18 {
  @include font-size18;
}
</style>